<template>
	<view class="wrongbook">
		<!-- 标签 -->
		<view class="tags">
			<view class="title">题目学科</view>
			<!--标签选择-->
			<selectLabel 
				:examList="examList" 
				:topicList="topicList"
				@labelType = "getLabelType"></selectLabel>
		</view>
		<!-- 题目列表 -->
		<view class="topic">
			<template v-if="questionItem.length != 0">
			<view class="topic-item" v-for="item in questionItem">
				<view class="title">
					<text v-if="item.questionType == 1">单选题</text>
					<text v-else-if="item.questionType == 2">多选题</text>
					<text v-else-if="item.questionType == 3">判断题</text>
					<text v-else-if="item.questionType == 4">填空题</text>
					<text v-else>简答题</text>
				</view>
				<!-- 只读状态 -->
				<uni-rate class="rate" :readonly="true" :value="questionDetail.questionAnswerVM.id === item.id?questionDetail.questionVM.difficult:0"  activeColor="#B4FF00" :size="16"/>
				<view class="content">
					<view class="content-title">
						{{item.shortTitle}}
					</view>
					<view class="content-content" v-if="item.id === currentItemIndex">
						<view class="content-first" v-if="item.questionType == 1 || item.questionType == 2 || item.questionType == 3">
							<view class="content-first-item" v-for="item1 in questionDetail.questionVM.items">{{item1.prefix}}.<text v-html="item1.content" style="margin-left: 8rpx;"></text></view>
						</view>
						<view class="content-second"><text>用户答案：</text><text v-if="item.questionType == 1 || item.questionType == 2 || item.questionType == 3 || item.questionType == 5">{{questionDetail.questionAnswerVM.content}}</text><text v-else>{{questionDetail.questionAnswerVM.contentArray}}</text></view>
						<view class="content-second"><text>正确答案：</text><text v-if="item.questionType == 1 || item.questionType == 2 || item.questionType == 3 || item.questionType == 5">{{questionDetail.questionVM.correct}}</text><text v-else>{{questionDetail.questionVM.correctArray}}</text></view>
						<view class="content-third"><view>解析：</view><text v-html="questionDetail.questionVM.analyze"></text></view>
					</view>
					<!-- <view class="iconfont icon-shanchu" v-if="1 === currentItemIndex"></view> -->
				</view>
				<view class="openOrClose"  v-if="item.id!== currentItemIndex" @click="showHide(item.id)">展开</view>
			</view>
			</template>
			<view class="topic-item" v-else>
				<view class="content">
					<view class="content-title">
						暂无此数据
					</view>
				</view>
			</view>
		</view>
		<view class="bottom" v-if="flag"> ---我是有底线的---</view>
		<!--返回顶部-->
		<!-- <goTop @goTop="goTop"></goTop> -->
	</view>
</template>

<script>
	import selectLabel from '@/components/selectTabel/selectTabel.vue'
	import goTop from "@/components/goTop/goTop.vue"
	export default {
		data() {
			return {
				//试卷类型标签
				examList: [],
				//学科类型标签
				topicList:[],
				questionItem:[],
				questionDetail: {
					questionVM:{ 
						items: [],
						analyze: null,
						content: null,
						difficult: null
					},
					questionAnswerVM:{
						content: null,
						id: null
					}
				},
				//当前展开题目
				currentItemIndex: -1,
				query: {
					pageIndex: 1,
					pageSize: 10,
					subjectId: null
				},
				total: 0,
				flag:false
			}
		},
		components:{
			selectLabel
		},
		onLoad(){
			
			//获取token
			let token = uni.getStorageSync("token");
			console.log(!token);
			if( !token){
				// uni.showToast({
				// 	title: "请先登录！！"
				// })
				uni.redirectTo ({
					url: "/pages/login/login"
				});
			}
			
			this.getSubjectList();
			this.getQuestionList();
		
		},
		//监听下拉刷新
		onPullDownRefresh(){
			console.log("下拉刷新了");
			//刷新数据
			this.questionDetail={
				questionVM:{ 
					items: [],
					analyze: null,
					content: null,
					difficult: null
				},
				questionAnswerVM:{
					content: null,
					id: null
				}
			}
			this.currentItemIndex = -1;
			this.questionItem = [];
			this.query.pageIndex = 1;
			 //重新获取数据
			setTimeout( ()=>{this.getQuestionList( ()=> {uni.stopPullDownRefresh()})},1000);
			
		},
		onReachBottom(){
			console.log("触底了");
			if(this.total <= this.questionItem.length){
				this.flag = true;
				return ;
			}
			
			this.query.pageIndex++;
			//获取试卷列表
			this.getQuestionList();
		},
		methods: {
			async getQuestionList(callBack){
				const resp = await this.$myRequest({
					url: '/api/student/question/answer/page',
					data: this.query
				})
				if(resp){
					this.questionItem =[...this.questionItem , ...resp.data.data] ;
					this.total = resp.data.total;
				}
				callBack && callBack();
			},
			//查询学科
			async getSubjectList(){
				const resp = await this.$myRequest({
					url: "/api/student/education/subject/list"
				})
				if( resp.data.code == 200){
					this.topicList = resp.data.obj;
				}
				this.topicList.unshift({
					id: 0,
					name: "全部"
				});
			},
			getLabelType(data){
				if( data.type == 2 && data.index == 0){
					this.query.subjectId = null
				}else if( data.type == 2 && data.index != 0){
					this.query.subjectId = data.index 
				}
				this.questionDetail={
					questionVM:{ 
						items: [],
						analyze: null,
						content: null,
						difficult: null
					},
					questionAnswerVM:{
						content: null,
						id: null
					}
				}
				this.currentItemIndex = -1;
				this.questionItem = [];
				this.query.pageIndex = 1;
				this.getQuestionList();
			},
			//点击显示和隐藏
			async showHide(index){
				
				this.currentItemIndex = index;
				
				const resp = await this.$myRequest({
					url: "/api/student/question/answer/select/"+index
				});
				
				if(resp.data.code == 200){
					this.questionDetail = resp.data.obj;
				}
			},
			//返回顶部
			goTop(){
				console.log(0);
				uni.pageScrollTo({
					scrollTop: 0
				})
			}
		}
	}
</script>

<style lang="scss">
// page{
// 	background-color: #F2F2F2;
// }
.wrongbook{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width:100%;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	.tags{
		width: 92%;
		margin: 20rpx 0;
		.title{
			color:#212121;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	.topic{
		width: 92%;
		font-size: 28rpx;
		color: #212121;
		
		.topic-item{
			width: 100%;
			background-color: #fff;
			border-radius: 20rpx;
			position: relative;
			margin-top: 36rpx;
			padding-bottom: 20rpx;
			.title{
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				left: 0;
				top: 0;
				width: 20%;
				background: #66BB6A;
				color:#fff;
				padding: 8rpx 20rpx;
				border-radius:  20rpx 0 20rpx 0;
				
			}
			.rate{
				position: absolute;
				right: 20rpx;
				top: 12rpx;
			}
			.content{
				padding: 80rpx 0 6rpx 30rpx;
				font-weight: 400;
				.content-title{}
				.content-content{
					.content-first{
						display: flex;
						flex-direction: column;
						margin-top: 20rpx;
						text{
							margin: 6rpx 0;
						}
						.content-first-item{
							display: flex;
							align-items: center;
						}
					}
					.content-second,{
						display: flex;
						flex-direction: row;
						margin: 6rpx 0;
						text{
							font-weight: bold;
						}
					}
					.content-third{
						display: flex;
						flex-direction: row;
						margin: 6rpx 0;
						text{
							font-weight: bold;
						}
					}
				}
				.iconfont{
					color:#BFBFBF;
					font-size: 48rpx;
					display: flex;
					justify-content: flex-end;
					margin-right: 20rpx;
				}
			}
			.openOrClose{
				color:#66BB6A;
				display: flex;
				justify-content: flex-end;
				margin-right: 24rpx;
				padding-bottom: 8rpx;
			}
		}
		.topic-item:first-child{
			margin-top: 6rpx;
		}
		
	}
	.bottom{
		margin-top: 6rpx;
		font-size: 28rpx;
		color:#BFBFBF;
	}
}
</style>
